<template>
  <div class="cert-box">
    <!-- 预览 -->
    <div class="load" v-if="loading">
        <i class="el-icon-loading"></i>
        <p>加载中...</p>
    </div>
    <img :src="imgUrl" alt="" v-else>
    <!-- 查看证书 -->
    <!-- <el-button class="addBtn" round @click="clickDown">下载证书</el-button> -->
    <!-- 下载按钮 -->
    <a :href="pdfUrl" class="addBtn">下载证书</a>
  </div>
</template>

<script>
import {getExamResultGetCertificateApi} from "@/BMViews/api/assess/question.js"
import { downloadfun } from "@/wss/utils/wss.js";
export default {
    name: 'certDrawer',
    props:{
        // 选择的一个科目
        selectStudyItem:{
            type: Object,
        },
        // 选择的一个角色
        selectRadioList:{
            type: Object,
        },
    },
    data(){
        return{
            loading: true,
            imgUrl: '',//预览图片
            pdfUrl: '',//下载链接
        }
    },
    mounted(){
        this.getExamResultGetCertificate() // 获取证书
    },
    watch:{
        selectStudyItem:{
            deep:true,
            handler(){
                // 先清除数据
                this.loading = true
                this.pdfUrl = '' 
                this.imgUrl = ''
                this.getExamResultGetCertificate() // 获取证书
            },
        },
    },
    methods:{
        // 获取证书
        async getExamResultGetCertificate(){
            if(!('score' in this.selectStudyItem)) return
            let examResultId = this.selectStudyItem.id
            let result = await getExamResultGetCertificateApi({examResultId})
            if(result.code==200){
                this.pdfUrl = result.data.pdfUrl
                this.imgUrl = result.data.imgUrl
                this.loading = false
            }
        },

        // 点击下载按钮
        clickDown(){
            let url = this.pdfUrl;
            let fileName = url.substring(url.lastIndexOf("/") + 1); //获取文件名称
            downloadfun(fileName, url); // 下载文件需要引入
        },

    },
}
</script>

<style lang="scss" scoped>
// 加载中
.load{
    font-size: 12px;
    color: #999;
    margin: 15px 0;
    p{
        margin: 0;
    }
}

.cert-box{
    padding: 0 20px;
    text-align: center;img{
        display: block;
        height: 75vh;
        margin: 0 auto;
    }
    .addBtn{
        display: inline-block;
        border-radius: 20px;
        font-size: 14px;
        padding: 6px 20px;
        border: 1px solid #F87A23;
        background-color: #fff;
        color: #F87A23;
        margin-top: 15px;
    }
}
</style>